<template>
  <div class="son">
      <h3>son.vue</h3>
      <p>我是son里的p</p>

      <!-- 子组件里的标签用不上当前的样式 -->
      <grand-son />
  </div>
</template>

<script>
import grandSon from './grandSon'
export default {
    components: {
        grandSon
    }
}
</script>

<style scoped>
/* 加了scoped，会让当前组件里写过的标签用上样式 */
/* 当前组件里没写的标签肯定用不上 */
/* 所以意味着组件里的子组件内部的标签用不上 */
    .son {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
    }

    /* 我现在p标签作用的更深：能影响到子组件里的标签，就要用深度作用选择器 */
    /* 
        >>> 
        /deep/
        ::v-deep 推荐
    */
    ::v-deep p {
        color: red;
    }
</style>

<style>
    /* p {
        font-size: 40px;
    } */
</style>